<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10">
        <div class="mainor_form batch-wrap form-item-mg">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <el-form-item label="用户名称：" prop="uid">
              <change-user-input
                ref="changeUserInput"
                @sendValue="getUser"
                @clear="clearUid"
                @change="getArticleList"
              ></change-user-input>
            </el-form-item>
            <el-form-item label="账期：" prop="payment_days">
              <el-date-picker
                v-model="form.payment_days"
                type="months"
                placeholder="选择多个月"
                value-format="yyyy-MM"
                prefix-icon="false"
                @change="getArticleList"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="账单日期：" prop="establishTime">
              <el-date-picker
                v-model="establishTime"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
                @change="getArticleList"
              />
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="false">
              <el-button class="mg-r-5" @click="export_de"
                >导出<el-tooltip class="item" effect="dark" placement="bottom">
                  <div slot="content">
                    注释：默认导出全部，也可勾选导出你想要的数据
                  </div>
                  <svg
                    aria-hidden="true"
                    class="navbar_svg new_navbar_svg"
                    width="14"
                    height="14"
                  >
                    <use xlink:href="#icon-summary_question" />
                  </svg> </el-tooltip
              ></el-button>
            </MainFormBtn>
          </el-form>
        </div>
        <div class="main_table">
          <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list.list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
          :row-class-name="getRowClass"
          :height="borderHeight"
          :header-cell-class-name="this.$verticaline"
          :header-cell-style="tableHeightStyle"
          @header-dragend="changeTableWidth"
        >
          <!-- <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.user_list"
                fit
                :highlight-current-row="false"
                :show-header="false"
                class="mainex_ta"
              >
                <el-table-column label width="96" align="right" />
                <el-table-column label="用户名称" prop="name">
                  <template slot-scope="scope">
                    <span>
                      {{
                        scope.row.name == props.row.name
                          ? scope.row.name
                          : props.row.name + "【" + scope.row.name + "】"
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="应收金额" prop="money" />
                <el-table-column label="已收金额" prop="paid" />
                <el-table-column label="抹零金额" prop="zero_money" />
                <el-table-column label="未收金额" prop="unpaid" />
                <el-table-column label="手机号" prop="mobile" />
                <el-table-column
                  label="管理操作"
                  align="left"
                  fixed="right"
                  width="140"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">
                    <el-link @click="goFlowing(scope, props)" type="success"
                      >结算</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column> -->

          <el-table-column type="selection" align="center" />
          <el-table-column label="用户名称" prop="name" 
          :width="tableWidth[hash+'name']"/>
          <el-table-column label="应收金额" prop="money" 
          :width="tableWidth[hash+'money']"/>
          <el-table-column label="已收金额" prop="paid"
          :width="tableWidth[hash+'paid']" />
          <el-table-column label="抹零金额" prop="zero_money" 
          :width="tableWidth[hash+'zero_money']"/>
          <el-table-column label="未收金额" prop="unpaid"
          :width="tableWidth[hash+'unpaid']" />
          <el-table-column label="手机号" prop="mobile"
          :width="tableWidth[hash+'mobile']" />

          <el-table-column
            label="管理操作"
            align="left"
            fixed="right"
            prop="operate"
            :width="tableWidth[hash+'operate'] || 140"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              <el-link @click="goFlowing(scope)" type="success">结算</el-link>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <div class="main_num boxdq mg-t-10">
          <div class="main_num_l box">
            <p>
              应收金额：
              <em>{{ list.money }}</em>
            </p>
            <p>
              已收总额：
              <em>{{ list.paid }}</em>
            </p>
            <p>
              抹零金额：
              <em>{{ list.zero_money_all }}</em>
            </p>
            <p>
              未收总额：
              <em>{{ list.unpaid }}</em>
            </p>
          </div>
          <!-- 分页 -->
          <!-- <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import {
  offline_generalLedger,
  export_generalLedger_list,
} from "@/api/financial/finacialCashOnDelivery";
import QRCode from "qrcodejs2";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, getNowMonth, exportMethod } from "@/utils/index";
import dateOption from "@/options/dateOption";
export default {
  mixins: [mixins],
  components: {},
  computed: {
    total() {
      let sz = 0;
      this.list.list.data.forEach((e) => {
        sz += parseFloat(this.$toFixed(parseFloat(e.balance)));
      });
      return sz ? this.$toFixed(sz) : parseFloat(0).toFixed(2);
    },
  },
  data() {
    return {
      parseTime,
      exportMethod,
      pickerOptions: dateOption,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: {
        list: [],
        money: "",
        paid: "",
        unpaid: "",
        zero_money_all: "",
      },
      listLoading: false,
      // 搜索
      form: {
        uid: "",
        payment_days: "",
        account_start_time: "",
        account_end_time: "",
      },
      establishTime: [],
      qrCodeId: "",
      addedFormVisible: false,
      // 全选
      selectArr: [],
    };
  },
  created() {
    // 列表
    this.getNumerical(145);
    this.form.payment_days = parseTime(getNowMonth()[0], "{y}-{m}");
    // this.form.payment_days = '2023-01'
    this.offline_generalLedger();
  },
  methods: {
    startGetting() {
      this.getArticleList();
    },
    //获取用户信息
    getUser(data) {
      let uid = data.info.user_id;
      this.form.uid = uid;
    },
    // 清除用户的uid
    clearUid() {
      this.form.uid = "";
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push(item.uid);
      });
    },
    // 导出明细
    export_de() {
      let form = {
        payment_days: this.form.payment_days.toString(),
      };
      if (this.selectArr.length > 0) {
        form.ids = this.selectArr.join(",");
      } else {
        form.ids = "";
      }

      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      export_generalLedger_list(data)
        .then((res) => {
          this.exportMethod(res, "货到付款总账列表", notify);
        })
        .catch((err) => {
          this.$message.error("导出失败");
        });
    },
    // 订单差额 ？注释
    renderHeader_purchase(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content:
                "注释：由于商品单价的波动，在线支付订单金额多退少补产生的差额！",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.offline_generalLedger();
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeUserInput"].name = "";
      this.offline_generalLedger();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.offline_generalLedger();
    },
    changePage(page) {
      this.current.page = page;
      this.offline_generalLedger();
    },
    // 列表
    offline_generalLedger() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      offline_generalLedger(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.payment_days = this.form.payment_days
        ? this.form.payment_days.toString()
        : "";
      form.account_start_time = this.establishTime[0]
        ? this.establishTime[0]
        : "";
      form.account_end_time = this.establishTime[1]
        ? this.establishTime[1]
        : "";
      return form;
    },
    // 计算每列的和
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计：";
          return;
        }
      });

      return sums;
    },

    // 差额流水跳转
    goFlowing(scope, props) {
      let data;
      if (props) {
        data = {
          zid: scope.row.uid,
          uid: props.row.uid,
          name: props.row.name,
        };
      } else {
        data = {
          uid: scope.row.uid,
          name: scope.row.name,
        };
      }
      data.payment_days = this.form.payment_days;
      this.$router.push({
        name: "financial_cash",
        params: data,
      });
    },

    getRowClass(row, index) {
      let res = [];
      // console.log(row.row.user_list);
      if (row.row.user_list && row.row.user_list.length <= 1) {
        res.push("row-expand-cover");
      } //即改行没有子元素时，添加row-expand-cover类
      return res.join(" ");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 240px);
  }
}
.new_navbar_svg {
  vertical-align: top;
  margin-left: 5px;
  use {
    fill: #606266;
  }
}
/deep/ .row-expand-cover .el-table__expand-column .el-icon {
  visibility: hidden;
}
/deep/.el-form-item--small.el-form-item {
  margin-bottom: 16px;
}
</style>
